<template>
	<div class="category" ref="categoryWarp">
		<div class="filter">
			<div class="address-menu" v-if="schoolList.length>0">
        <selector title="" :options="schoolList" 
        v-model="nowSchoolId" @on-change="filterSchool(nowSchoolId)"></selector>
			</div>
			<tab class="filter-type" 
				bar-active-color="#ff4444"
			 	active-color="#333333" 
			  default-color="#666666"
				>
				<tab-item class="filter-type-item" @on-item-click="filterHot()">热销</tab-item>
				<tab-item class="filter-type-item" @on-item-click="filterNew('new')">上新</tab-item>
				<tab-item class="filter-type-item" @on-item-click="filterPrice('price')">价格<span>
					<div class="sort-icons">
						<i class="fa fa-angle-up" :class="{active:sortPrice==='up'}"></i>
						<i class="fa fa-angle-down" :class="{active:sortPrice==='down'}"></i>
					</div>
					</span></tab-item>
			</tab>
		</div>
    <scroller lock-x :height="scrollHeight" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
  		<ul class="shop-list">
  			<li v-for="(shopItem,index) in goodsList" :key="index" @click="goDetail(shopItem)" class="shop-item">
  					<!-- <shop-item :shopItem="shopItem"></shop-item> -->
          <div class="picture">
            <img :src="shopItem.logo" alt="">
          </div>  
          <div class="name">{{shopItem.name}}</div>
          <div class="info">
            <div class="shop-item-price">￥{{shopItem.discountPrice|price}}</div>
            <div class="type" v-if="shopItem.type">
              {{shopItem.type}}
            </div>
          </div>
          <div class="address" v-if="shopItem.shopName">
            {{shopItem.shopName}}
          </div>
  			</li>
        <load-more :tip="loadingText" :show-loading="onFetching"></load-more>
  		</ul>
    </scroller>
	</div>
</template>
<script>
import axios from '@/api/request'
import { Tab, TabItem, Selector,LoadMore,Scroller } from "vux";
import ShopItem from "../components/shopItem";

export default {
  name: "category",
  components: {
    Tab,TabItem,ShopItem,Selector,LoadMore,Scroller
  },
  data() {
    return {
      filterList: [],
			filterType: "defalut",
			getBarWidth: function (index) {
        return (index + 1) * 22 + 'px'
      },
      sortPrice: "up", //up为由高到底，down由底到高
      goodsList: [],
      nowSchoolId: "",
      schoolList: [],
      firstKindId: '',
      listQuery:{
        pageSize: 10,
        pageNumber: 1,
        param:{
          name: '',
          firstKindId: '',
          schoolId: '',
          solds: '',        //2由低到高，1是由高到低
          sequence: '',    //1由低到高，2是由高到低
          startTime: '',   //上新取最新一周，  时间段开始时间
          endTime: '',     //时间段结束时间
        }
      },
      scrollHeight: null,
      onFetching: false,
      loading: false,
      loadingText: '',
    };
  },
  created() {
    this.fetchSchoolList()
    let firstKindId = this.$route.query.firstKindId
    let name = this.$route.query.name
    if(firstKindId){
      this.firstKindId = firstKindId
      this.listQuery.param.firstKindId = firstKindId
    }
    if(name){
      this.listQuery.param.name = name
    }
    // this.fetchData()
  },
  mounted() {
    this.$nextTick(() => {
      var heightCss = window.getComputedStyle(this.$refs.categoryWarp).height;
      var appHeight = this.$refs.categoryWarp.offsetHeight
      //console.log(heightCss)   //667px
      //console.log(appHeight)   //667
      this.scrollHeight = appHeight-44 + 'px'
    })
  },
  methods: {
    filterSchool(val){
      this.goodsList = []
      this.listQuery.param.schoolId = val
      this.fetchData()
    },
    filterHot(val){
      this.listQuery.param.startTime = ""
      this.listQuery.param.endTime = ""
      this.listQuery.param.sequence = ""
      this.listQuery.param.solds = 1
      this.goodsList = []
      this.fetchData()
    },
    filterNew(val){    //上新取最新一周，  时间段开始时间
      this.listQuery.param.solds = ""
      this.listQuery.param.sequence = ""
      let startTime = new Date()
      let endTime = new Date()
      endTime.setDate(startTime.getDate()-7)
      console.log(startTime)
      console.log(endTime)
      this.listQuery.param.startTime = endTime
      this.listQuery.param.endTime = startTime
      this.goodsList = []
      this.fetchData()
    },
    filterPrice(val){
      this.listQuery.param.startTime = ""
      this.listQuery.param.endTime = ""
      this.listQuery.param.solds = ""
      if (this.sortPrice === "up") {    //1由低到高，2是由高到低
        this.listQuery.param.sequence = 2
        this.goodsList = []
        this.fetchData()
        this.sortPrice = "down";
      } else {                    //1由低到高，2是由高到低
        this.listQuery.param.sequence = 1
        this.goodsList = []
        this.fetchData()
        this.sortPrice = "up";
      }
    },
    goDetail(item){
      this.$router.push({path: 'secGoodsDetail',query:{goodsId: item.id}})
    },
    fetchData(){
      axios('/device/productSecond/listSort','post',this.listQuery).then(res=>{
        if(res.data.code==1000){
          console.log(res)
          var newList = res.data.data.list;
          if(newList.length==0){
            this.listQuery.pageNumber-=1
            // this.$vux.toast.text('没有更多数据了', 'middle')
            this.loadingText = "没有数据啦·～～·"
          }
          else{
            this.goodsList = this.goodsList.concat(newList)
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
          }
          this.onFetching = false
        }
      })  
    },
    fetchSchoolList() {
      axios('/device/school/list','post',{}).then(res=>{
        if(res.data.code==1000){
          // console.log(res)
          let arr = res.data.data.list
          for(let i in arr){
             this.schoolList.push({key: arr[i]['id'],value: arr[i]['name']})
          }
          this.nowSchoolId = this.schoolList[1].key
        }
      })
    },
    onScrollBottom(){
      let self = this
      if(this.onFetching) {
          // do nothing
      }else {
        this.onFetching = true
        this.loadingText = "loading"
        this.listQuery.pageNumber+=1
        this.fetchData()
      }
    },
  }
};
</script>
<style lang="less" scoped>
// @import "../assets/less/category.less";
.category{
  height: 100%;
  .vux-tab-wrap {
    position: relative;
    padding-top: 0;
  }
  .filter{
    display: flex;
    // height: 1.2rem /* 90/75 */;
    border-bottom: 1px solid #dcdcdc;
    align-items: center;
    .address-menu{
      h2{
        padding-left: 52rem/75;
        color: #333333;
      }
    }
    
    .filter-type{
      flex: 3;
      height: 88rem/75;
      border: 0;
      box-sizing: border-box;
      &-item{
        font-size: .32rem!important /* 24/75 */;
      }
      .sort-icons{

        width: .226667rem /* 17/75 */;
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        padding-left: .213333rem /* 16/75 */;
        i{
          color: #9a9a9a;
          &.active{
            color: #000000;
          }
        }
      }
    }
  }
  .shop-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .266667rem /* 20/75 */;
    li{
      width: 4.613333rem /* 346/75 */;
      margin-bottom: .533333rem /* 40/75 */;
    }
    .shop-item{
      // width: 100%;
      background: #fff;
      .picture{
        height: 346rem/75;
        width: 100%;
        img{
            width: 100%;
            height: 346rem/75;
        }
      }
      .name{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000000;
        font-size: .4rem /* 30/75 */;
        margin-top: .533333rem /* 40/75 */;
      }
      .info{
        display: flex;
        margin-top: .226667rem /* 17/75 */;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        .shop-item-price{
        color: #ff4444;
        font-size: .4rem /* 30/75 */;
        background: #fff;
        }
        .type{
          width: .933333rem /* 70/75 */;
          height: .426667rem /* 32/75 */;
          background-color: #feefec;
          text-align: center;
          line-height: .426667rem /* 32/75 */;
          font-size: .306667rem /* 23/75 */;
            color: #ff4444;
        }
      }
      .address{
          padding-top: 4rem/75;
          color: #999999;
          font-size: .266667rem /* 20/75 */;
      }
    }
  }
}
</style>
<style lang="less">
  .vux-selector {
      .weui-cell__bd::after {
          border-width: 0 2px 2px 0 !important;
      }
  }
</style>


